<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 200px;
            height: 30px;
            margin: 50px auto;
            position: relative;
        }

        #showrand {
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #0b333f;
            color: #ffffff;
        }

        #tip {
            position: absolute;
            height: 200px;
            width: 200px;
            left: 0;
            top: 35px;
            background-color: #0b333f;
        }

        #tip span {
            position: absolute;
            display: block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            background-color: #ff3333;
            color: #ffffff;
        }

        #tip span .num {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            height: 14px;
            width: 14px;
            background-color: #00FF00;
            text-align: center;
            line-height: 14px;

        }

    </style>
</head>
<body>
<div id="box">
    <div id="showrand">点击显示验证码
    </div>
    <div id="tip">

    </div>
</div>


</body>
<script>
    var showRand = document.getElementById("showrand");
    var tip = document.getElementById("tip");
    var source = "我喜欢敲代码学习是我快乐";
    showRand.onclick = function () {
        showRand.innerHTML = getRandom(source, 4);

    }

    function getRandom(str, len) {
        var html = "";
        tip.innerHTML = "";
        var count = 0;
        var clickHtml = "";
        for (var i = 0; i < len; i++) {
            var randIndex = Math.round(Math.random() * (str.length - 1));
            var item = str.charAt(randIndex);
            if (html.indexOf(item) == -1) {
                html += item;//item 就是显示的东西
                var span = document.createElement("span");
                span.innerHTML = item;
                tip.appendChild(span);
                span.style.top = Math.round(Math.random() * 170) + "px";
                span.style.left = Math.round(Math.random() * 170) + "px";

                span.onclick = function () {
                    this.style.backgroundColor = "#cdcdcd";
                    count++;
                    clickHtml += this.innerHTML;

                    var numSpan = document.createElement("span");
                    numSpan.className = "num";
                    numSpan.innerHTML = count;
                    this.appendChild(numSpan);

                    if (count == len) {//生成就点击几个
                        if (clickHtml == showRand.innerHTML) {
                            alert("验证成功");
                        } else {
                            showRand.innerHTML = getRandom(source, 4);
                        }
                    }
                }


            } else {
                i--;
            }
        }
        return html;

    }

</script>
</html>